<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <h1>
                    <span>TAG</span>
                    <span>TIME</span>
                </h1>
            </el-header>
            <!-- <img src="@/assets/logo.png" alt=""> -->
            <el-main>
                <div class="banner">
                    <el-carousel indicator-position="outside" height="270px">
                        <el-carousel-item v-for="(item, index) in bannerList" :key="index">
                            <el-image :src="item" />
                        </el-carousel-item>
                    </el-carousel>
                </div>


                <div class="btn">
                    <el-button type="primary" size="large">
                        <router-link to="/nav">PRODUCT</router-link>
                    </el-button>
                </div>
                <div class="btn">
                    <el-button type="primary" size="large">
                        <router-link to="#">MATERIAL</router-link>
                    </el-button>
                </div>
            </el-main>
            <el-footer>
                <div class="foo" :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
                    <div class="left">
                        <img src="@/assets/img/ewm.png" alt="">
                    </div>
                    <!-- 公司地址 -->
                    <div class="right">
                        <div><a href="http://www.tagtimeusa.com">http: //www.tagtimeusa.com</a></div>
                        <div><a href="tel: 86-769-83235222">Hotline (China):86-769-83235222</a></div>
                        <div><a href="tel: 852-3188-6488">Hotline (HK):852-3188-6488</a></div>
                        <div><a href="tel: (323) 587-1555">Hotline (U.S.A): (323) 587-1555</a></div>
                    </div>
                </div>
            </el-footer>
        </el-container>
    </div>
</template>

<script setup>

import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import router from '../router/index.js'

const bannerList = reactive(
    [
        require('@/assets/img/p02.png'),
        require('@/assets/img/p03.png'),
        require('@/assets/img/p04.png'),
        require('@/assets/img/p05.jpg'),
    ]
)



</script>

<style scoped>
@import '../assets/css/f.css';

.el-header{
    margin-top: 5vh;
}
/* .common-layout {
    margin-top: -3em;
} */

h1 {
    font-family: fz;
    font-size: 3em;
    margin-top: 0em
}

h1 span:nth-child(1) {
    color: red;
}

.el-carousel__item h3 {
    display: flex;
    color: #21354e;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
}

.banner {
    margin-top: 3em;
}


.el-carousel img {
    width: 100%;
    height: 100%;
}

.foo {
    display: flex;
    text-decoration: none;
    margin: auto;
    margin-top: 5%;
    /* position: fixed;
    left: 0;
    right: 0;
    bottom: 0; */
    z-index: -10;
}

.foo .left img {
    width: 100px;
    height: 100px;
}

.foo .right {
    margin-top: 8px;
}

.foo .right a {
    float: left;
    padding: 2px;
    font-size: smaller;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

@media screen and (min-width:300px) {
    .el-image {
        width: 350px;
        height: 172px;
    }

    .btn[data-v-23543608] {
        color: red;
        margin-top: 2vh;

    }

    .btn[data-v-23543608] a {
        color: #21354e;
    }
}

@media screen and (min-width:768px) {
    .el-image {
        width: 645px;
        height: 295px;
    }

    .btn[data-v-23543608] {
        color: red;
        margin-top: 4vh;

    }

    .btn[data-v-23543608] a {
        color: #21354e;
    }

    .foo .right a {
        float: left;
        padding: 2px;
        font-size: larger;
    }

    .foo {
        margin-left: 12vh;
    }

    .foo .right {
        margin-top: 3%;
        font-size: large;
    }

    .foo .left img {
        width: 160px;
        height: 160px;
    }

}

a {
    text-decoration: none;
}

.btn {
    margin-top: 2vh;
}
</style>
